<template>
  <el-menu default-active="2" class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff"
    active-text-color="#ffd04b" :collapse="isCollapse">
    <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.path" @click="clickMenu(item)">
      <i :class="'el-icon-'+item.icon"></i>
      <span slot="title">{{item.label}}</span>
    </el-menu-item>
    <el-submenu :index="item.label" v-for="(item, index) in hasChildren" :key="index">
      <template slot="title">
        <i :class="'el-icon-' + item.icon"></i>
        <span slot="title">{{ item.label }}</span>
      </template>
      <el-menu-item-group>
        <el-menu-item :index="subItem.path" v-for="(subItem, subIndex) in item.children" :key="subIndex"
          @click="clickMenu(subItem)">
          <i :class="'el-icon-' + subItem.icon"></i>
          <span slot="title">{{ subItem.label }}</span>
          <!-- 这里遍历的时候加sub是因为区分父级遍历  :index属性用于 处于选中的东西添加背景颜色-->
        </el-menu-item>
      </el-menu-item-group>
    </el-submenu>
  </el-menu>
</template>
<script>
  export default {
    data() {
      return {
        asideMenu: [
          {
            path: '/',
            name: 'home',
            label: '首页',
            icon: 's-home'
          },
          {
            path: '/Video',
            name: 'Video',
            label: '视频管理',
            icon: 'video-play'
          },
          {
            path: '/user',
            name: 'user',
            label: '用户管理',
            icon: 'user'
          },
          {
            label: '其他',
            icon: 'video-play',
            childern: [
              {
                path: '/page1',
                name: 'page1',
                icon: 'setting',
                label: '页面1'
              },
              {
                path: '/page2',
                name: 'page2',
                icon: 'setting',
                label: '页面2'
              }
            ]
          }
        ]
      }
    },
    computed: {
      noChildren() {
        return this.menu.filter(item => !item.children)  //filter方法用于筛选数组  返回满足条件的数组  三个参数，1元素2索引3数组本身
      },
      hasChildren() {
        return this.menu.filter(item => item.children)
      },
      isCollapse() {
        return this.$store.state.tab.isCollapse
      },
      menu() {
        return this.$store.state.tab.menu
      }
    },
    methods: {
      clickMenu(item) {
        if (this.$route.path !== item.path) {     //避免重复点击跳转路由报错
          this.$router.push(item.path)            //$route是查询信息的时候用   $router是跳转路由的时候用
          this.$store.commit('selectMenu', item)               //提交数据到这个方法难道会自己调用吗   不需要手动调用？
        }
      }
    },
  }
</script>
<style lang="scss" scoped>
  .el-menu {
    height: 100%;
    border: 0;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
</style>